new Vue({
    el: '#main-md-pick',
    data() {
        return {
            list: [],
        };
    },
    async created() {
        try {
            const targetUrl = 'https://gateway.10x10.co.kr/cache/apis/product/mdpick';
            const response = await fetch(targetUrl);
            if (response.ok) {
                const json = await response.json();
                if (json.status === 200 && json.message === 'success') {
                    // if (json.result.length >= 15) {
                        this.list = json.result;
                    // }
                }
            }
        } catch (e) {}
    },
    methods: {
        toKrLocaleString(number) {
            let value = '0';
            value = parseInt(number);
            value = parseInt(value.toFixed());
            value = value.toLocaleString('ko-KR');
            return value;
        },
        getItemLink(target, index) {
            return `/shopping/category_prd.asp?itemid=${target.itemId}&gaparam=main_mdpick_${index + 1}`;
        },
        AmpEventMdPick(index) {
            const props = {
                MdpickNumber: `${index}`,
            };

            AmplitudeEventSend('MainMdPick', props, 'eventProperties');
        },
        rollUpMultiPropsWithAmplitudeEvent(item, index) {
            const propNames = 'mdpicknumber|itemid|categoryname|brand_id';
            const propValues = `${index + 1}|${item.itemId}|${item.categoryName}|${item.brandId}`;
            fnAmplitudeEventMultiPropertiesAction('click_mainmdpick', propNames, propValues);
        },
    },
    template: `
        <div class="section md-pick">
            <div class="inner-cont">
                <div class="ftLt" style="width:280px;">
                    <h2><strong>MD's</strong> Pick</h2>
                    <p class="desc">텐바이텐 엠디가<br>자신있게 추천합니다</p>
                    <ul class="list-tag">
                        <li><a href="/award/awardlist.asp?atype=b&gaparam=main_mdpick_best">#BEST 100</a></li>
                        <li><a href="/my10x10/popularwish.asp?gaparam=main_mdpick_wish">#BEST WISH</a></li>
                        <li><a href="/award/bestaward_new.asp?gaparam=main_mdpick_newbest">#NEW BEST</a></li>
                    </ul>
                </div>
                <div class="ftRt" style="width:860px;">
                    <div class="items type-thumb">
                        <ul>
                            <li v-for="(item, index) in list" @click="rollUpMultiPropsWithAmplitudeEvent(item, index)">
                                <a :href="getItemLink(item, index)" @click="AmpEventMdPick(index)">
                                    <div class="thumbnail">
                                        <img :src="item.image + '/10x10/optimize'" :alt="item.name" />
                                    </div>
                                    <div class="desc">
                                        <p class="name">{{ item.name }} <span v-if="item.isNewProduct === 'Y'" class="labelV18 color-blue">NEW</span></p>
                                        <div class="price">
                                            <span v-if="item.discountText" class="discount color-red">{{ item.discountText }}</span>
                                            <span class="sum">{{ toKrLocaleString(item.price) }}</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>                                
    `,
});